<template>
  <div class="admin-profile-container">
    <!-- 卡片标题添加自习室标识 -->
    <el-card class="profile-card" header="自习室管理员 - 个人信息管理">
      <el-form :model="adminUser" label-width="120px" class="profile-form">
        <!-- 头像上传区域：保持圆形风格，增加自习室管理员标识 -->
        <div class="avatar-container">
          <el-upload
              class="avatar-uploader"
              :action="$baseUrl + '/files/upload'"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
          >
            <img v-if="adminUser.avatar" :src="adminUser.avatar" class="avatar" />
            <div v-else class="avatar-placeholder">
              <i class="el-icon-user-circle avatar-icon"></i>
              <div class="avatar-tip">管理员头像</div>
            </div>
          </el-upload>
        </div>

        <!-- 表单字段：调整文案贴合管理员身份，增加必要校验 -->
        <el-form-item label="管理员账号" prop="username" required>
          <el-input v-model="adminUser.username" placeholder="请输入管理员账号" disabled
                    tooltip="管理员账号不可修改"></el-input>
        </el-form-item>

        <el-form-item label="管理员姓名" prop="name" required>
          <el-input v-model="adminUser.name" placeholder="请输入管理员真实姓名"></el-input>
        </el-form-item>

        <el-form-item label="联系电话" prop="phone" required>
          <el-input v-model="adminUser.phone" placeholder="请输入联系电话"
                    oninput="this.value = this.value.replace(/[^\d]/g,'')"
                    maxlength="11"></el-input>
        </el-form-item>

        <el-form-item label="工作邮箱" prop="email">
          <el-input v-model="adminUser.email" placeholder="请输入工作邮箱"
                    type="email"></el-input>
        </el-form-item>

        <!-- 新增管理员角色显示：贴合自习室权限管理 -->
        <el-form-item label="管理权限" prop="role">
          <el-input v-model="adminUser.role" disabled >
          </el-input>
        </el-form-item>

        <!-- 保存按钮区域：调整样式，增加场景化文案 -->
        <div class="form-actions">
          <el-button type="primary" @click="updateProfile" class="save-btn">
            <i class="el-icon-check"></i> 保存管理员信息
          </el-button>
          <el-button @click="resetForm" class="reset-btn">
            <i class="el-icon-refresh"></i> 重置
          </el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "AdminPerson",
  data() {
    return {
      // 重命名变量为adminUser，明确管理员身份
      adminUser: JSON.parse(localStorage.getItem('xm-user') || '{}'),
      // 备份初始数据用于重置
      originalUser: {}
    }
  },
  created() {
    // 备份初始数据，用于重置功能
    this.originalUser = JSON.parse(JSON.stringify(this.adminUser));
    // 若未设置角色，默认填充普通管理员
    if (!this.adminUser.role) {
      this.adminUser.role = "ADMIN";
    }
  },
  methods: {
    // 头像上传前校验：限制格式和大小，避免无效上传
    beforeAvatarUpload(file) {
      const isImage = file.type.startsWith('image/');
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isImage) {
        this.$message.error('请上传图片格式文件（JPG/PNG）');
      }
      if (!isLt2M) {
        this.$message.error('图片大小不能超过2MB');
      }
      return isImage && isLt2M;
    },

    // 头像上传成功处理
    handleAvatarSuccess(response, file, fileList) {
      this.$set(this.adminUser, 'avatar', response.data);
      this.$message.success('管理员头像上传成功');
    },

    // 保存个人信息：调整接口文案和提示
    updateProfile() {
      // 简单校验：确保必填字段不为空
      if (!this.adminUser.name || !this.adminUser.phone) {
        this.$message.error('管理员姓名和联系电话为必填项');
        return;
      }

      this.$request.put('/admin/update', this.adminUser).then(res => {
        if (res.code === '200') {
          localStorage.setItem('xm-user', JSON.stringify(this.adminUser));
          this.$message.success('自习室管理员信息保存成功');
          this.$emit('update:user'); // 通知父组件更新用户数据
        } else {
          this.$message.error(`信息保存失败：${res.msg || '服务器异常'}`);
        }
      }).catch(err => {
        this.$message.error('网络异常，无法连接自习室管理服务器');
        console.error('管理员信息更新失败：', err);
      });
    },

    // 重置表单：恢复到初始数据
    resetForm() {
      this.adminUser = JSON.parse(JSON.stringify(this.originalUser));
      this.$message.info('已重置为原始管理员信息');
    }
  }
}
</script>

<style scoped>
.admin-profile-container {
  padding: 30px;
  background-color: #f9f7ff;
  min-height: calc(100vh - 60px);
}

.profile-card {
  width: 60%;
  margin: 0 auto;
  border-radius: 8px;
  box-shadow: 0 2px 15px rgba(123, 97, 255, 0.1);
  border: 1px solid #e0d9f7;
}

/* 卡片标题样式：贴合紫色主题 */
::v-deep .el-card__header {
  font-size: 18px;
  font-weight: 500;
  color: #5d46c3;
  border-bottom: 1px solid #e0d9f7;
}

.avatar-container {
  text-align: center;
  margin: 20px 0 30px;
}

.avatar-uploader {
  display: inline-block;
}

/* 头像占位符优化：增加自习室管理员标识 */
.avatar-placeholder {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 1px dashed #d9d9d9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #faf8ff;
}

.avatar-icon {
  font-size: 40px;
  color: #7b61ff;
  margin-bottom: 8px;
}

.avatar-tip {
  font-size: 12px;
  color: #9a89e0;
}

.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #7b61ff;
}

.profile-form {
  padding: 0 40px 20px;
}

/* 表单标签样式：突出管理员字段 */
::v-deep .el-form-item__label {
  font-weight: 500;
  color: #5d46c3;
}

/* 输入框样式：贴合紫色主题 */
::v-deep .el-input__inner {
  border-color: #e0d9f7;
  border-radius: 4px;
}

::v-deep .el-input__inner:focus {
  border-color: #7b61ff;
  box-shadow: 0 0 0 2px rgba(123, 97, 255, 0.2);
}

/* 下拉框样式：贴合主题 */
::v-deep .el-select-dropdown {
  border-color: #e0d9f7;
}

::v-deep .el-select-dropdown__item.selected {
  background-color: #f0edff;
  color: #7b61ff;
}

/* 按钮区域样式 */
.form-actions {
  text-align: center;
  margin-top: 40px;
}

.save-btn {
  background-color: #7b61ff;
  border-color: #7b61ff;
  margin-right: 15px;
  padding: 8px 25px;
}

::v-deep .save-btn:hover {
  background-color: #6a54e0;
  border-color: #6a54e0;
}

.reset-btn {
  color: #9a89e0;
  border-color: #e0d9f7;
  padding: 8px 25px;
}

::v-deep .reset-btn:hover {
  color: #7b61ff;
  border-color: #7b61ff;
  background-color: #faf8ff;
}
</style>